.colorbox {
  width: 3rem;
  height: 3rem;
  &.medium {
    width: 5rem;
    height: 5rem;
    display: block;
    float: left;
    padding: 1rem;
  }
  &.light {
    width: 7rem;
    height: 7rem;
    display: block;
    float: left;
    padding: 1rem;
  }
}

.dragonfruit {
  background-color: var(--dragonfruit-3);
  &.light {
    background-color: var(--dragonfruit-5);
  }
  &.medium {
    background-color: var(--dragonfruit-4);
  }
}

.watermelon {
  background-color: var(--watermelon-3);
  &.light {
    background-color: var(--watermelon-5);
  }
  &.medium {
    background-color: var(--watermelon-4);
  }
}

.pomelo {
  background-color: var(--pomelo-3);
  &.light {
    background-color: var(--pomelo-5);
  }
  &.medium {
    background-color: var(--pomelo-4);
  }
}

.orange {
  background-color: var(--orange-3);
  &.light {
    background-color: var(--orange-5);
  }
  &.medium {
    background-color: var(--orange-4);
  }
}

.kiwi {
  background-color: var(--kiwi-3);
  &.light {
    background-color: var(--kiwi-5);
  }
  &.medium {
    background-color: var(--kiwi-4);
  }
}

.honeydew {
  background-color: var(--honeydew-3);
  &.light {
    background-color: var(--honeydew-5);
  }
  &.medium {
    background-color: var(--honeydew-4);
  }
}
.bluerazz {
  background-color: var(--bluerazz-3);
  &.light {
    background-color: var(--bluerazz-5);
  }
  &.medium {
    background-color: var(--bluerazz-4);
  }
}

.blueberry {
  background-color: var(--blueberry-3);
  &.light {
    background-color: var(--blueberry-5);
  }
  &.medium {
    background-color: var(--blueberry-4);
  }
}

.grape {
  background-color: var(--grape-3);
  &.light {
    background-color: var(--grape-5);
  }
  &.medium {
    background-color: var(--grape-4);
  }
}

.gray {
  background-color: var(--gray-3);
  &.light {
    background-color: var(--gray-5);
  }
  &.medium {
    background-color: var(--gray-4);
  }
}
